<template>
  <div class="courseList">
    <!--详细信息-->
    <div class="top">
      <div class="left">
        <img :src="subject.subjectDetails.subPic">
      </div>
      <div class="right">
        <div class="title-box">
          <div class="title">标题:</div>
          <div class="total">课时:</div>
          <div class="teacher">讲师:</div>
          <div class="qqGroup">QQ群:</div>
          <div class="introduction">简介:</div>
        </div>
        <div class="content-box">
          <div class="title">{{subject.subjectName}}</div>
          <div class="total">{{subject.subjectDetails.subTotal}}</div>
          <div class="teachers">
            <span v-for="(obj,i) in teacherList">
              {{obj}}
            </span>
          </div>
          <div class="qqGroups">
            <span v-for="(obj,i) in qqGroupList">
              {{obj}}
            </span>
          </div>
          <div class="introduction">
            {{subject.subjectDetails.subIntroduction}}
          </div>
        </div>
      </div>
    </div>

    <!--课时列表-->
    <div class="body">
      <div class="chapter-box" v-for="(chapter,i) in chapterList">
        <!--章节名称-->
        <div class="title">
          <!--图标-->
          <div class="chapter-pre">
            <img src="../../assets/course/chapter.png">
          </div>
          <!--章节名称-->
          <div class="name">
            {{chapter.chapterName}}
          </div>
        </div>
        <!--课时列表盒子-->
        <div class="course-box">
          <!--单个课时盒子-->
          <div class="course"
               v-for="(course,j) in chapter.courseList"
               @click="gotoCourse(course)">
            <!--提示-->
            <div class="pre">
              <img src="../../assets/course/video.png">
            </div>
            <!--课时名称-->
            <div class="name">
              {{course.courseName}}
            </div>
            <!--评分-->
            <div class="score">
              <Rate disabled allow-half v-model="course.courseDetails.courseScore"/>
            </div>
            <!--view-->
            <div class="view">
              <div class="img-box">
                <img src="../../assets/course/view.png">
              </div>
              <div class="num">
                {{course.courseDetails.courseView}}
              </div>
            </div>
            <!--vip-->
            <div class="vip">
              <img v-if="course.courseDetails.vip==1" src="../../assets/course/vip.png">
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
  export default {
    name: "",
    components: {},
    data() {
      return {
        //课程id
        subjectId: this.$route.query.sid,
        //课程和课程详细信息
        subject: {
          subjectId: "",
          subjectName: "",
          status: "",
          showOrder: "",
          subjectDetails: {
            subjectDetailsId: "",
            subjectId: "",
            subPic: "",
            subTotal: "",
            subScore: "",
            subTeacher: "",
            qqGroup: "",
            subIntroduction: "",
            status: ""
          }
        },
        //教师群
        teacherList: [],
        //QQ群
        qqGroupList: [],
        //章节列表
        chapterList: []
      }
    },
    methods: {
      //去课时详细页面
      gotoCourse:function(course){
        //跳转
        let {href} = this.$router.resolve({
          name: "CourseDetails",
          query: {
            cid: course.courseId
          }
        });
        window.open(href, '_blank');
      },
      //获取课程详细信息
      getSubjectAndDetails: function () {
        this.axios.get(`/course/subject/subject/details/${this.subjectId}`)
          .then((resp) => {
            if (resp.data.flag) {
              this.subject = resp.data.data

              //赋值 teacher
              let teacherStr = this.subject.subjectDetails.subTeacher;
              let teachers = teacherStr.split(",");
              this.teacherList = teachers
              //赋值 qq群
              let qqGroupStr = this.subject.subjectDetails.qqGroup;
              let qqGroups = qqGroupStr.split(",");
              this.qqGroupList = qqGroups
            }
          })
      },
      //获取课程章节课时列表
      getChaptersAndCourses: function () {
        this.axios.get(`/course/subject/subject/chapter/course/${this.subjectId}`)
          .then((resp) => {
            if (resp.data.flag) {
              this.chapterList = resp.data.data
            }
          })
      }
    },
    mounted() {
      //获取课程详细信息
      this.getSubjectAndDetails();
      //获取课程章节课时列表
      this.getChaptersAndCourses();
    }
  }
</script>

<style scoped>
  .courseList {
    width: 1200px;
    min-height: calc(100vh - 70px);
    margin: 0 auto;
  }

  .courseList .top {
    overflow: hidden;
    margin-bottom: 20px;
    box-shadow: 0 4px 8px 0 rgba(7, 17, 27, 0.1);
  }

  .courseList .top .left,
  .courseList .top .right {
    float: left;
  }

  /*课程图片*/
  .courseList .top .left img {
    width: 300px;
    height: 200px;
    margin: 20px 20px 0px 20px;
    border-radius: 6px;
  }

  .courseList .top .right .title-box,
  .courseList .top .right .content-box {
    float: left;
  }

  /*文字*/
  .courseList .top .right .title-box div {
    width: 64px;
    height: 26px;
    margin-top: 8px;
    font-size: 18px;
    line-height: 26px;
    font-weight: bolder;
    font-family: 仿宋;
    text-align: right;
    color: #336666;
  }

  .courseList .top .right .title-box .title {
    margin-top: 20px;
  }

  /*标题*/
  .courseList .top .right .content-box .title {
    margin-top: 20px;
    margin-left: 10px;
    color: #FF0000;
    font-weight: bolder;
  }

  /*课时*/
  .courseList .top .right .content-box .total {
    margin-top: 10px;
    margin-left: 10px;
    color: #FF0000;
    font-weight: bolder;
  }

  /*课时*/
  .courseList .top .right .content-box .teachers span {
    display: inline-block;
    margin-top: 10px;
    margin-left: 10px;
    padding: 1px 6px 1px 6px;
    background-color: #EEEEEE;
    border-radius: 4px;
  }

  .courseList .top .right .content-box .qqGroups span {
    display: inline-block;
    margin-top: 10px;
    margin-left: 10px;
    padding: 1px 6px 1px 6px;
    background-color: #EEEEEE;
    border-radius: 4px;
  }

  .courseList .top .right .content-box .introduction {
    width: 780px;
    margin-top: 8px;
    margin-left: 10px;
    font-size: 14px;
    color: rgba(78, 78, 78, 0.84);
  }


  /***************************************************************/

  /*课时列表*/
  .courseList .body {
    /*box-shadow: 0 4px 8px 1px rgba(7, 17, 27, 0.1);*/
  }

  /*章节盒子*/
  .courseList .body .chapter-box {
    margin: 10px 0px 10px 0px;
  }

  /*章节名称*/
  .courseList .body .chapter-box .title {
    overflow: hidden;
    margin-top: 10px;
    border-radius: 4px;
    background-image: linear-gradient(to right, #66CC99, #66CCBB, #66CCCC);
  }

  /*章节图标*/
  .courseList .body .chapter-box .title .chapter-pre {
    float: left;
    height: 32px;
    margin: 2px 6px 0px 10px;
  }

  .courseList .body .chapter-box .title .chapter-pre img {
    width: 32px;
    height: 32px;
  }

  /*章节名称*/
  .courseList .body .chapter-box .title .name {
    float: left;
    font-size: 24px;
    font-weight: 400;
  }

  /*课时列表盒子*/
  .courseList .body .chapter-box .course-box {
    margin-top: 10px;
    margin-right: 10px;
    padding-left: 50px;
  }

  /*单个课时*/
  .courseList .body .chapter-box .course-box .course {
    font-size: 16px;
    height: 40px;
    line-height: 40px;
    overflow: hidden;
  }

  /*移动到课时上*/
  .courseList .body .chapter-box .course-box .course:hover {
    font-size: 16px;
    font-weight: bolder;
    background-image: linear-gradient(to right, #99CCCC, #99FFFF);
    height: 40px;
    line-height: 40px;
  }

  /*课时 行 前缀*/
  .courseList .body .chapter-box .course-box .course .pre,
  .courseList .body .chapter-box .course-box .course .name {
    float: left;
  }

  /*前缀图片*/
  .courseList .body .chapter-box .course-box .course .pre img {
    width: 18px;
    height: 18px;
    margin: 10px 6px 0px 6px;
  }

  /*评分*/
  .courseList .body .chapter-box .course-box .course .score {
    float: right;
    width: 130px;
  }

  /*观看次数*/
  .courseList .body .chapter-box .course-box .course .view {
    float: right;
    width: 100px;
    overflow: hidden;
    margin: 0px 20px;
  }

  .courseList .body .chapter-box .course-box .course .view .img-box {
    float: left;
    margin-right: 6px;
  }

  .courseList .body .chapter-box .course-box .course .view .img-box img {
    width: 24px;
    height: 24px;
    margin: 8px 4px 0px 4px;
  }

  .courseList .body .chapter-box .course-box .course .view .num {
    float: left;
  }

  /*vip盒子*/
  .courseList .body .chapter-box .course-box .course .vip {
    float: right;
    width: 44px;
    height: 32px;
    margin-top: 4px;
  }

  /*vip盒子*/
  .courseList .body .chapter-box .course-box .course .vip img {
    display: inline-block;
    width: 40px;
    height: 30px;
  }
</style>
